/**
 * 图表下方表格的样式，用的时候需要在scss里引入
 * 目前assets/hrm/common.scss引用了
 */
//  table,table tr th, table tr td { border:0.01rem solid #ccc; }
//  table { width: 200px; min-height: 25px; line-height: 25px; text-align: center; border-collapse: collapse;} 
.tableBox{
	overflow: hidden;
} 
 .tableUnderChart {
 	//表格下方的图标，显示表格的数据
 	// padding: 1.35rem;
 	margin-left: 5%;
 	margin-right: 5%;
 	padding-bottom: 1rem;
	overflow-x: scroll;
	overflow-y: hidden;
	padding-right: 1%;
	// &:after{
	// 	content: '';
	// 	width: 90%;
	// 	height: 1rem;
	// 	position: absolute;
	// 	left: 5%;
	// 	background: red;
	// 	z-index:9999;
	// }
 	table {
		width: 100%;
		border-collapse:collapse;
		margin-bottom:2rem;
		tbody{
			margin-right: 1%;
		}
 		tr {
 			height: 1rem;
 			color: #3c3c3c;
 			font-size: .5rem;
			line-height: 1rem;

 			.header {
				 border-left:1px solid #ccc;
				 border-right:1px solid #ccc;
				 border-top:0.5px solid #ccc;
				//  border:1px solid #ccc;
				 position: absolute;
				// float: left;
				 background: #fff;
				 width: 3.5rem;
				 .headerWidth{
					width: 3.5rem;
				 }
				
 				// 
 				// text-align: right;
 				padding-right: .25rem;

 				.label{
 					display: inline-block;
 					vertical-align: top;
 				}

 				.tip{
 					display: inline-block;
 					margin-right: 0.1rem;
 					width: .5rem;
 				}

 				//因为echarts里面配的颜色，是不能直接用在这里的，所以只能针对性的重新定义
 				//class格式：图表类型(barLine)-颜色配置(type_1)-第一行(tip1)
 				.barLine_bar_type_1_tip1 {
 					height: .5rem;
 					background:linear-gradient(0deg,rgba(254,155,48,1),rgba(255,230,75,1));
 					border-radius: 0.1rem;
 				}
 				.barLine_line_type_1_tip2 {
 					vertical-align: middle;
 					height: 0.05rem;
 					background: #F65C04;
 				}
 				.barLine_line_type_1_tip3 {
 					vertical-align: middle;
 					height: 0.05rem;
 					background: #A973E6;
 				}

 				.barLine_bar_type_3_tip1{
 					height: .5rem;
 					background:linear-gradient(0deg,rgba(130,48,254,1),rgba(211,75,255,1));
 					border-radius: 0.1rem;
 				}
				
				.barLine_bar_type_3_tip2{
					height: .5rem;
 					background:linear-gradient(0deg,rgba(130,48,254,1),rgba(211,75,255,1));
 					border-radius: 0.1rem;
				}

 				.barLine_line_type_3_tip2 {
 					vertical-align: middle;
 					height: 0.05rem;
 					background: #5064FE;
 				}
 				.barLine_line_type_3_tip3 {
 					vertical-align: middle;
 					height: 0.05rem;
 					background: #73E6DA;
				 }
				 
				.barLine_bar_type_5_tip1{
					height: .5rem;
					margin-top: 0.26rem;
 					background:linear-gradient(0deg,rgba(254,155,48,1),rgba(255,230,75,1));
 					border-radius: 0.1rem;
				}
				.barLine_bar_type_5_tip2{
					height: .5rem;
					margin-top: 0.26rem;
 					background:linear-gradient(0deg,rgba(130,48,254,1),rgba(211,75,255,1));
 					border-radius: 0.1rem;
				}
				.barLine_line_type_5_tip3{
					vertical-align: middle;
 					height: 0.05rem;
 					background: #F65C04;
				}
				.barLine_bar_type_6_tip1{
					height: .5rem;
					margin-top: 0.3rem;
 					background:linear-gradient(0deg,rgba(130,48,254,1),rgba(211,75,255,1));
 					border-radius: 0.1rem;
				}
				.barLine_bar_type_6_tip2{
					height: .5rem;
					margin-top: 0.3rem;
 					background:linear-gradient(0deg,rgba(229,63,254,1),rgba(255,145,241,1));
 					border-radius: 0.1rem;
				}
				.barLine_line_type_6_tip3{
					vertical-align: middle;
 					height: 0.05rem;
 					background: #2BA467;
				}

 				.bar_bar_type_6_tip1{
 					height: .5rem;
 					background:linear-gradient(0deg,rgba(254,155,48,1),rgba(255,230,75,1));
 					border-radius: 0.1rem;
 				}
 				.bar_bar_type_6_tip2{
 					height: .5rem;
 					background:linear-gradient(0deg,rgba(248,41,85,1),rgba(254,104,107,1));
 					border-radius: 0.1rem;
 				}
 				.bar_bar_type_6_tip3{
 					height: .5rem;
 					background:linear-gradient(0deg,rgba(130,48,254,1),rgba(211,75,255,1));
 					border-radius: 0.1rem;
 				}
			 }
			// .header:last-child{
			// 	border-bottom:0.5px solid #ccc;
			// }
			// .header:first-child{
			// 	border-top:0.5px solid #ccc;
			// }
 			.value{
				border-left:1px solid #ccc;
				border-top:1px solid #ccc;
				padding: 0 0.2rem;
				// position: relative;
				// top: 10px;
				// background-color: red;
				// background-clip: padding-box;
			 }
			 .value:nth-child(2){
				 padding-left: 4rem;
				 border-left: none;
			 }
			td:last-child{
				position: relative;
				right: 2px;
				border-right: 1px solid #ccc;
			}
		 }
		tr:last-child{
			border-bottom: 1px solid #ccc;
		}
 	}
 }